let box = document.querySelector(".box");
let imgBoxUl = box.querySelector(".img_box > ul");


// 动态生成图片(第一张和最后一张)
// console.log(imgBoxUl.firstElementChild.cloneNode(true));
// console.log(imgBoxUl.lastElementChild.cloneNode(true));
// 插入克隆的第一张图片到最后一张图片之后的位置
imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true));
// 插入克隆的第四张图片到第一张之前的位置
imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild);
// 初始化下标
let index = 1;
// 移动到原来第一张图片的位置
imgBoxUl.style.transform = `translateX(-${index}00%)`;
setTimeout(function () {
    imgBoxUl.style.transition = "0.2s ease-in-out";
}, 300);

box.addEventListener("click", function (event) {
    if (event.target.className == "arrow_left") {
        arrowLeftFn();
    }

    if (event.target.className == "arrow_right") {
        arrowRightFn();
    }



});

// 点击右边事件
function arrowRightFn() {
    index++;
    imgBoxUl.style.transform = `translateX(-${index}00%)`;

    // 判断是否到达最后一张
    if (index == imgBoxUl.children.length - 1) {
        index = 1;
        limit();
    }
}

// 点击左边事件
function arrowLeftFn() {
    index--;
    imgBoxUl.style.transform = `translateX(-${index}00%)`;
    // console.log(index);
    // 判断是否是第一张
    if (index == 0) {
        index = imgBoxUl.children.length - 2;
        limit();
    }
};


// 临界点跳转图片
function limit() {
    imgBoxUl.addEventListener("transitionend", function () {
        // 清除过渡效果, 并且ul恢复到-100%位置
        imgBoxUl.style.transition = "none";
        imgBoxUl.style.transform = `translateX(-${index}00%)`;

        // 恢复过渡效果
        // 获取最终样式(被计算的样式)
        window.getComputedStyle(imgBoxUl, "style").getPropertyValue("transition");
        imgBoxUl.style.transition = "0.2s ease-in-out";
    })
}

// 小圆点
function dotFn(){
    let dataIndex =terget.getAttribute("data-index");
    // 操作的值重新赋值到
    index =dataIndex;
    imgBoxUl.style.transform=`translateX(-${index}00%)`
    
}
